<template>
	<div class="match-container">
		<van-sidebar>
			<van-sidebar-item title="最佳匹配" />
		</van-sidebar>
		<div v-for="(item, index) in matchList" :key="index">
			<div class="content" v-if="item.artist">
				<van-image
					width="6rem"
					height="4rem"
					fit="cover"
					:src="item.artist ? item.artist[0].img1v1Url : ''"
				/>
				<van-cell
					:title="`${item.artist && item.artist[0].occupation}：${
						item.artist && item.artist[0].name
					}`"
					is-link
				/>
			</div>
			<div class="content" v-if="item.album">
				<van-image
					width="6rem"
					height="4rem"
					fit="cover"
					:src="item.album ? item.album[0].blurPicUrl : ''"
				/>
				<van-cell
					:title="`${item.album && item.album[0].type}：${
						item.album && item.album[0].name
					}`"
					is-link
				/>
			</div>
		</div>
		<div>
			<song-list :list="multimatchList" />
		</div>
	</div>
</template>

<script>
import eventBus from "@/event-bus";
export default {
	props: {
		inputValue: String,
	},
	data() {
		return {};
	},
	computed: {
		matchList() {
			return eventBus.matchList;
		},
		multimatchList() {
			return eventBus.multimatchList.slice(0, 30).map((item) => ({
				id: item.id,
				name: item.name, // 歌曲名
				maxBr: item.privilege.downloadMaxbr, // 最大音质
				alias: item.alia[0],
				artists: item.ar,
				albumName: item.al.name,
			}));
		},
	},
};
</script>
<style scoped>
.match-container {
	width: 100%;
	overflow: hidden;
}
.content {
	font-size: 16px;
	width: 100%;
	display: flex;
	align-items: center;
	margin-top: 4px;
	overflow: hidden;
}
</style>